<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id="app-1">
        <button @click="counter++">增加 1</button>
        <p>这个按钮被点击了 {{ counter }} 次。</p>
        <!-- `greet` 是在下面定义的方法名 -->
        <button @click="greet">Greet</button>
        <button @click="say('hi')">Say hi</button>
        <button @click="say('what')">Say what</button>
        <button @click="warn('Form cannot be submitted yet.', $event)">
            Submit
        </button>
    </div>
    <script>
        var app1 = new Vue({
            el: '#app-1',
            data: {
                counter: 0,
                name: 'Chen'
            },
            // 在 `methods` 对象中定义方法
            methods: {
                greet: function (event) {
                    // `this` 在方法里指当前 Vue 实例
                    alert('Hello ' + this.name + '!')
                    // `event` 是原生 DOM 事件
                    if (event) {
                        alert(event.target.tagName)
                    }
                },
                say: function (message) {
                    alert(message)
                },
                warn: function (message, event) {
                    // 现在我们可以访问原生事件对象
                    if (event) event.preventDefault()
                    alert(message)
                }
            }
        });
    </script>
</body>


</html>